<template>
  <div class="floating-keyboard fixed z-50"
       :style="{ top: position.top, left: position.left }"
       @mousedown="startDrag">
    <div class="keyboard-header bg-primary text-white px-3 py-2 flex justify-between items-center cursor-move">
      <h3 class="font-medium">简谱键盘</h3>
      <button @click="toggleVisibility" class="text-white hover:text-gray-200">
        <i class="fa fa-times"></i>
      </button>
    </div>
    
    <div class="keyboard-body bg-white border border-gray-200 rounded-b-lg p-2">
      <div class="grid grid-cols-7 gap-1 mb-1">
        <button v-for="(key, index) in keyboardRows[0]" :key="index"
                class="key p-1.5 border border-gray-300 rounded text-center hover:bg-gray-100 transition-colors"
                @click="inputNote(key.value)">{{ key.display }}</button>
      </div>
      <div class="grid grid-cols-7 gap-1 mb-1">
        <button v-for="(key, index) in keyboardRows[1]" :key="index"
                class="key p-1.5 border border-gray-300 rounded text-center hover:bg-gray-100 transition-colors"
                @click="inputNote(key.value)">{{ key.display }}</button>
      </div>
      <div class="grid grid-cols-7 gap-1">
        <button v-for="(key, index) in keyboardRows[2]" :key="index"
                class="key p-1.5 border border-gray-300 rounded text-center hover:bg-gray-100 transition-colors"
                @click="inputNote(key.value)">{{ key.display }}</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import keyMap from '../utils/keyMap';

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: true
  }
});

const emit = defineEmits(['update:modelValue']);

// 键盘位置
const position = ref({
  top: '100px',
  left: '20px'
});

// 键盘映射 (按行分组)
const keyboardRows = ref([
  keyMap.slice(0, 7),
  keyMap.slice(7, 14),
  keyMap.slice(14)
]);

// 拖动状态
const dragState = ref({
  isDragging: false,
  startX: 0,
  startY: 0,
  initialTop: 0,
  initialLeft: 0
});

// 切换键盘显示状态
const toggleVisibility = () => {
  emit('update:modelValue', !props.modelValue);
};

// 开始拖动
const startDrag = (e) => {
  if (e.target.closest('.key')) return; // 点击按键不触发拖动
  
  dragState.value.isDragging = true;
  dragState.value.startX = e.clientX;
  dragState.value.startY = e.clientY;
  dragState.value.initialTop = parseInt(position.value.top);
  dragState.value.initialLeft = parseInt(position.value.left);
  
  document.addEventListener('mousemove', handleDrag);
  document.addEventListener('mouseup', stopDrag);
};

// 拖动中
const handleDrag = (e) => {
  if (!dragState.value.isDragging) return;
  
  const newTop = dragState.value.initialTop + (e.clientY - dragState.value.startY);
  const newLeft = dragState.value.initialLeft + (e.clientX - dragState.value.startX);
  
  position.value = {
    top: `${newTop}px`,
    left: `${newLeft}px`
  };
};

// 停止拖动
const stopDrag = () => {
  dragState.value.isDragging = false;
  document.removeEventListener('mousemove', handleDrag);
  document.removeEventListener('mouseup', stopDrag);
};

// 输入音符
const inputNote = (note) => {
  const event = new CustomEvent('input-note', { detail: { note } });
  document.dispatchEvent(event);
};

// 键盘监听
onMounted(() => {
  document.addEventListener('keydown', handleKeydown);
});

onUnmounted(() => {
  document.removeEventListener('keydown', handleKeydown);
});

const handleKeydown = (e) => {
  if (!props.modelValue) return;
  
  const keyInfo = keyMap.find(key => key.key === e.key.toLowerCase());
  if (keyInfo) {
    e.preventDefault();
    inputNote(keyInfo.value);
  }
};
</script>

<style scoped>
.floating-keyboard {
  min-width: 280px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-radius: 4px 4px 0 0;
  transition: all 0.2s ease;
}

.key {
  font-family: 'Arial Unicode MS', sans-serif;
  font-size: 15px;
}
</style>